import { useState } from 'react';
import { Popup } from 'antd-mobile';
import { TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';

export default function GroupPopup(props: any) {
  const { groups, visible, setVisible, setActiveGroup, curGroup } = props;
  const [idx, setIdx] = useState(0);
  const [itemLabel, setItemLabel] = useState<any>();

  // 高亮显示当前项
  const hightlight = (index: any, item: any) => {
    setIdx(index);
  };

  //点击确认
  const onOk = () => {
    setActiveGroup(itemLabel);
    onCancel();
  };

  //点击取消
  const onCancel = () => {
    setVisible(false);
  };

  return (
    <Popup
      visible={visible}
      onMaskClick={() => {
        setVisible(false);
      }}
      bodyStyle={{
        maxHeight: '300px',
        borderRadius: '7px 7px 0 0',
      }}
    >
      <div className="processCenter-h5-easy-group-popup-wrapper">
        <div className="processCenter-h5-easy-group-popup-title">
          <div className="processCenter-h5-easy-group-popup-title-cancel" onClick={onCancel}>
            <TextWidget>processCenter.cancel</TextWidget>
          </div>
          <div className="processCenter-h5-easy-group-popup-title-text">
            <TextWidget>processCenter.selectType</TextWidget>
          </div>
          <div className="processCenter-h5-easy-group-popup-title-on" onClick={onOk}>
            <TextWidget>processCenter.ok</TextWidget>
          </div>
        </div>
        <div className="processCenter-h5-easy-group-popup-content">
          {groups?.map((item: { key: string; label: string }, index: any) => {
            return (
              <div
                className={
                  curGroup == item?.label
                    ? 'processCenter-h5-easy-group-popup-content-item active-group'
                    : 'processCenter-h5-easy-group-popup-content-item'
                }
                key={item?.key}
                onClick={() => {
                  hightlight(index, item);
                  setItemLabel(item?.label);
                }}
                style={{
                  background: idx == index ? 'rgba(245,245,245)' : '#fff',
                  color: 'var(--inbiz-color-heading)',
                }}
              >
                {item?.label}
                {idx == index && (
                  <InbizIcon
                    type="icon-ic-select-bold"
                    style={{
                      fontSize: '20px',
                      color: 'var(--inbiz-color-primary)',
                    }}
                  ></InbizIcon>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </Popup>
  );
}
